<template>
  <div>
    <el-dialog title="流程进度" width="80%" :visible.sync="dialogFormVisible" center>
      <div>
        <el-steps :active="opDateMax" class="steps" process-status='wait' finish-status="success" align-center style="margin-top: 20px">
          <el-step v-for="(item,index) in stepsText"   :title="item" description="" :key="index"></el-step>
        </el-steps>

        <el-collapse accordion v-if="showOP">
          <el-collapse-item title="详细流程" name="1">
            <Timeline style="padding: 10px 0 0 0;">
              <template v-for="item in opData">
                <Timeline-item color="blue"  v-if="item.id==14">
                  {{item.pivot.created_at+'  '+'案件已撤案。'}}
                </Timeline-item>
                <Timeline-item color="blue"  v-if="item.id==13">
                  {{item.pivot.created_at+'  '+'发明人确认定稿。'}}
                </Timeline-item>

                <Timeline-item color="blue"  v-if="item.id==12">
                  {{item.pivot.created_at }} 代理人变更为： <span class="fontgreen" > {{ order.agent.name }} </span>
                </Timeline-item>

                <Timeline-item color="blue"  v-if="item.id==10">
                  {{ item.pivot.created_at }} 代理人：<span class="fontgreen" > {{ order.agent.name }} </span>，已发送定稿文件。
                </Timeline-item>

                <Timeline-item color="blue"  v-if="item.id==8">
                  {{item.pivot.created_at+'  '+'等待提交国知局。'}}
                </Timeline-item>

                <Timeline-item color="blue"  v-if="item.id==7">
                  {{item.pivot.created_at+'  '+'案件定稿文件已上传。'}}
                </Timeline-item>

                <Timeline-item color="blue"  v-if="item.id==5">
                  {{item.pivot.created_at+'  '+'案件内审未通过。'}}
                </Timeline-item>

                <Timeline-item color="blue"  v-if="item.id==4">
                  {{item.pivot.created_at+'  '+'案件内审通过。'}}
                </Timeline-item>

                <Timeline-item color="blue"  v-if="item.id==3">
                  {{item.pivot.created_at+'  '+'案件撰写完毕,内审中。'}}
                </Timeline-item>

                <Timeline-item color="blue"  v-if="item.id==2">
                  {{ item.pivot.created_at }} 订单已分配代理人：<span class="fontgreen" >{{  order.agent.name }}</span> 联系电话：{{ order.agent.phone }} 案件撰写中。
                </Timeline-item>

                <Timeline-item color="blue"  v-if="item.id==1">
                  {{ item.pivot.created_at }} 提交成功,本次订单您的专属顾问是：<span class="fontgreen" >{{ order.process.email_work.split("@")[0].split("followup")[1]+'号' }}</span> {{ '联系电话：'+ order.process.phone + '。' }}
                </Timeline-item>
              </template>
            </Timeline>
          </el-collapse-item>
        </el-collapse>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dialogFormVisible: false,
      opDateMax: 1, //状态里最大的id是多少
      opData: [],
      showOP: true,
      order: {}
    };
  },
  created () {

  },
  props: ['stepsText', 'isfalse'],
  methods: {
    showDialog(row){
      this.dialogFormVisible = true;
      console.log(row)
      // if(row.order) {
        this.order = row
        let opData = [];
        opData.push(row.statuss);
        this.opData = [];
        this.opData.push(...opData);
        let opData2Temp = [];
        for(let i in row.statuss){
          let obj = {
            id:row.statuss[i].id,
            name:row.statuss[i].name,
            created_at:row.statuss[i].created_at
          }
          let pivot = {}
          for(let m in row.statuss[i].pivot){
            pivot[m] = row.statuss[i].pivot[m]
          }
          obj.pivot = pivot;
          opData2Temp.push(obj);
        }
        this.opData.push(...opData2Temp)

        // ②opData数组按每个元素的“id”属性升序
        let opData2 = [];
        opData2.push(...opData2Temp);
        opData2.reverse();
        // opData2.sort(rule("id"));
        let opDateMax = opData2.length - 1;
        this.opData = opData2

        for (let i = opDateMax; i >= 0; i--) {

          if (opData2[i].id == 8) {
            this.opDateMax = 8;
            break;
          } else if (opData2[i].id == 7) {
            this.opDateMax = 7;
            break;
          } else if (opData2[i].id == 13) {
            this.opDateMax = 6;
            break;
          } else if (opData2[i].id == 10) {
            this.opDateMax = 5;
            break;
          } else if (opData2[i].id == 4) {
            this.opDateMax = 4;
            break;
          } else if (opData2[i].id == 3) {
            this.opDateMax = 3;
            break;
          } else if (opData2[i].id == 2) {
            this.opDateMax = 2;
            break;
          } else if (opData2[i].id == 1) {
            this.opDateMax = 1;
            break;
          }
        }
      // }

    }
  }
};
</script>
<style lang='less'>
.steps {

  .el-step__main{
    min-width: 90px;
    width: 100%;
    .el-step__title {
      text-align: center;
      font-size: 15px;
      width: 100%;
    }
  }
  .el-step__head{
    &.is-wait{
      .el-step__icon {
        &.is-text{
          .el-step__icon-inner{
            display: none; //不要序号
          }
        }
      }
    }
  }
  .el-step:nth-child(odd) {
    .el-step__main{
      position: absolute;
      top: -40px;
    }

  }
}

.el-collapse{
  margin: 20px 0 0 20px;
}
.fontgreen {
		color: rgb(73, 150, 124);
		font-weight: 700;
  }
  .ivu-timeline {
    .ivu-timeline-item{
      .ivu-timeline-item-content {
        font-size: 15px;
      }
    }
  }
</style>
